<template>
    <div>
        <h1>富文本编辑器案例</h1>
        <el-button type="success" @click="openDialog">弹出富文本编辑器窗口</el-button>

        <el-dialog
                fullscreen="true"
                title="提示"
                :visible.sync="dialogVisible"
                width="30%">
            <div>
                <quill-editor
                        v-model="content"
                        ref="myQuillEditor"
                        :options="editorOption"
                        @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
                        @change="onEditorChange($event)">
                </quill-editor>

            </div>

            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="onSubmit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
    import { quillEditor } from "vue-quill-editor"; //调用编辑器
    import 'quill/dist/quill.core.css';
    import 'quill/dist/quill.snow.css';
    import 'quill/dist/quill.bubble.css';
    import quillConfig from '../../common/js/quill-config'

    export default {
        components: { //引入富文本编辑器的组件
            quillEditor
        },
        data() {
            return {
                dialogVisible: false,
                content:"", // 绑定数据
                editorOption: quillConfig //将quill的配置设置富文本编辑器中
            }
        },
        methods: {
            openDialog(){
                this.dialogVisible = true;
            },
            onEditorReady(editor) {}, // 准备编辑器
            onEditorBlur(){}, // 失去焦点事件
            onEditorFocus(){}, // 获得焦点事件
            onEditorChange(){}, // 内容改变事件
            onSubmit(){
                console.log("content===="+this.content)
            }
        },
        computed:{
             editor() {
                return this.$refs.myQuillEditor.quill;
             },
        }
    }
</script>